<template>
  <view class="background">
    <view @click="icon_click">
      <A_icon class="aicon" ref="icon_ref"></A_icon
    ></view>

    <view class="body">
      <A_head ref="hh" @click="h_click"></A_head>
      <!-- action_index=0 的模板 -->
      <template v-if="action_index === 0">
        <A_inputs
          :ref="(el) => (fromData.tab0.drpy_title = el)"
          placeholder="title-->规则标题,没有实际作用,但是可以作为cms类名称依据"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab0.drpy_host = el)"
          placeholder="host-->网页的域名根,包含http头如 https://www.baidu.com"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab0.drpy_headers = el)"
          placeholder="headers-->网站的请求头,完整支持 所有的,常带ua和cookies"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab0.drpy_tply = el)"
          placeholder="图片来源-->对图片加了referer验证的有效"
        ></A_inputs>
      </template>

      <!-- action_index=1 的模板 -->
      <template v-if="action_index === 1">
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_class_name = el)"
          placeholder="class_name-->电影&电视剧&动漫"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_class_url = el)"
          placeholder="class_url-->dianying&dianshiju&dongman"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_url = el)"
          placeholder="url-->网站的分类页面链接"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_filter_url = el)"
          placeholder="filter_url-->筛选网站传参,会自动传到分类链接下-url里参数为fyfilter,可参考蓝光影院.js"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_filter = el)"
          placeholder="filter-->筛选条件字典"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab1.drpy_filter_def = el)"
          placeholder="filter_def-->默认筛选条件字典(不同分类可以指定同样筛选参数的不同默认值)"
        ></A_inputs>
      </template>

      <!-- action_index=2 的模板 -->
      <template v-if="action_index === 2">
        <A_inputs
          :ref="(el) => (fromData.tab2.drpy_searchUrl = el)"
          placeholder="searchUrl-->搜索链接 可以是完整 路径或者相对路径,**代表搜索词 fypage代表页数"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab2.drpy_searchable = el)"
          placeholder="searchable-->是否启用全局搜索"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab2.drpy_ycl = el)"
          placeholder="预处理-->js,变量有rule_fetch_params,rule,网页访问request,post等操作"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab2.drpy_ss = el)"
          placeholder="搜索-->js,变量有rule_fetch_params,rule,网页访问request,post等操作"
        ></A_inputs>
      </template>

      <!-- action_index=3 的模板 -->
      <template v-else-if="action_index === 3">
        <!-- 此选项卡当前无内容 -->
        <A_inputs
          :ref="(el) => (fromData.tab3.drpy_yj = el)"
          placeholder="一级-->js,变量有rule_fetch_params,rule,网页访问request,post等操作"
        ></A_inputs>
      </template>

      <!-- action_index=4 的模板 -->
      <template v-else-if="action_index === 4">
        <A_inputs
          :ref="(el) => (fromData.tab4.drpy_tab_remove = el)"
          placeholder="tab_remove-->移除某个线路及相关 的选集"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab4.drpy_tab_order = el)"
          placeholder="tab_order-->线路顺序,按里面的顺 序优先，没写的依次排后面"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab4.drpy_tab_rename = el)"
          placeholder="tab_rename-->线路名替换如:lzm3u8替换为量子资源"
        ></A_inputs>
        <A_inputs
          :ref="(el) => (fromData.tab4.drpy_ej = el)"
          placeholder="二级-->js,变量有rule_fetch_params,rule,网页访问request,post等操作"
        ></A_inputs>
      </template>

      <!-- action_index=5 的模板 -->
      <template v-else-if="action_index === 5">
        <A_inputs
          :ref="(el) => (fromData.tab5.drpy_play_parse = el)"
          placeholder="play_parse-->true"
        ></A_inputs>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'

import g from '@/common/global'
import { onReady } from '@dcloudio/uni-app'
const hh = ref(null)
const icon_ref = ref(null)
const action_index = ref(0)
var hh_index = 0

//=======数据加载定义=====

// 创建 fromData 对象，集中管理所有 A_inputs 组件的 ref
const fromData = reactive({
  tab0: {
    drpy_title: null, // 对应 action_index=0 的 title 输入框
    drpy_host: null, // 对应 action_index=0 的 host 输入框
    drpy_headers: null, // 对应 action_index=0 的 headers 输入框
    drpy_tply: null,
  },
  tab1: {
    drpy_class_name: null, // 对应 action_index=1 的 class_name
    drpy_class_url: null,
    drpy_url: null,
    drpy_filter_url: null,
    drpy_filter: null,
    drpy_filter_def: null,
  },
  tab2: {
    drpy_searchUrl: null,
    drpy_searchable: null,
    drpy_ycl: null,
  },
  tab3: {
    drpy_yj: null, // 对应 action_index=2 的搜索关键字
  },
  tab4: {
    drpy_tab_remove: null, // 对应 action_index=4 的线路移除
    drpy_tab_order: null,
    drpy_tab_rename: null,
    drpy_ej: null,
  },
  tab5: {
    drpy_play_parse: null, // 对应 action_index=5 的 play_parse
  },
})
const tab = (index) => {
  return fromData[`tab${index}`]
}
const loadTabData = async (tabIndex) => {
  console.log('加载数据...')
  await nextTick() // 确保 DOM 更新
  const tabKey = `tab${tabIndex}`

  Object.entries(fromData[tabKey] || {}).forEach(([fieldName, fieldRef]) => {
    // if (fieldRef && r[fieldName] !== undefined) {
    // console.log(`字段名: ${fieldName}`, fieldRef)
    let r_name = fieldName.replace('drpy_', '')
    // console.log(r_name)
    // console.log('getkv-->', g.getkv(g.other_name, r_name))
    // console.log('==')
    fieldRef.set_input_value(
      g.get_json_value(g.rule[g.getkv(g.other_name, r_name)]),
    )
    // }
  })
}

//====
console.log('页面正在加载...')
const h_click = async () => {
  // console.log(hh_index)
  for (const key in tab(hh_index)) {
    // console.log(tab(hh_index)[key])

    let k = key.replace('drpy_', '')
// 	console.log("====")
// console.log(g.rule)
// 	console.log("====")
    g.save_json(
      g.rule,
      g.getkv(g.other_name, k),
      tab(hh_index)[key].get_input_value(),
    )
    // console.log(g.rule)
  }
  hh_index = hh.value.get_select_index()

  action_index.value = hh_index
  await nextTick()

  // console.log('action_index -->', action_index.value)
  loadTabData(action_index.value)
}
const icon_click = () => {
  const get_icon_index = icon_ref.value.get_click_index()
  if (get_icon_index === 0) {
    console.log('爬虫')
    for (const key in tab(hh_index)) {
      // console.log(tab(hh_index)[key])

      let k = key.replace('drpy_', '')
      g.save_json(
        g.rule,
        g.getkv(g.other_name, k),
        tab(hh_index)[key].get_input_value(),
      )
      // console.log(g.rule)
    }
    // console.log(globals.url)
    uni.navigateTo({
      url: '/pages/debug/debug',
    })
  } else if (get_icon_index === 1) {
    console.log('导入')
    uni.redirectTo({
      url: '/pages/import_json/import_json',
    })
  } else if (get_icon_index === 2) {
    console.log('导出')
  }
}
// 直接使用 UniApp 的页面生命周期
onReady(() => {
  console.log('页面渲染完成')
  loadTabData(0)
  // tab(hh_index)["drpy_headers"].set_input_value("aasdasd")
  // console.log(fromData.tab0.drpy_title)
})

//=============json绑定==========
</script>

<style>
.background {
  /* width: 100%; */
  height: 93vh;
  background-color: #eee;
}
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
A_input {
  /* background-color: red; */
  width: 100%;
}
.aicon {
  background-color: red;
}
</style>
